<template>
  <div class="de-detail">
    <div v-loading="loading">
      <c-list
        ref="form"
        label-width="120px"
        :column="3"
      >
        <el-form-item label="门店编码:" prop="shopCode">
          <input-with-dialog
            v-model="shop"
            :disabled="!!decorateTaskNo"
            :props="{label:'code',value:'code'}"
            :config="dialogConfigShop"
            @change="handleChangeShop"
          />
        </el-form-item>
        <c-list-item :span="2" type="text" label="门店名称" :value="shopDetail.shopName" />
        <c-list-item :span="2" type="text" label="门店地址" :value="shopDetail.shopAddress" />
        <c-list-item type="text" label="办事处" :value="shopDetail.officeName" />
        <c-list-item type="text" label="客户编码" :value="shopDetail.customerCode" />
        <c-list-item type="text" label="客户名称" :span="2" :value="shopDetail.customerName" />

        <el-form-item label="装修任务号:" prop="shopCode">
          <input-with-dialog
            v-model="constArr"
            :disabled="!!decorateTaskNo||!shopDetail.shopCode"
            :props="{label:'decorationTaskCode',value:'decorationTaskCode'}"
            :config="{
              title: '装修任务号',
              filtersRaw: [],
              pageFlag: false,
              method:'get',
              interfacePath: `/slm-admin/api/v1/fitPatrol/getDecorationByShopCode/${shopDetail.shopCode||shopCode}`,
              setting: [{ prop: 'constCode', title: '门店建设项目号' }, { prop: 'decorationTaskCode', title: '装修任务号' }]
            }"
            @change="handleChangeConst"
          />
        </el-form-item>
        <c-list-item
          type="text"
          label="装修步骤"
          dict-type-code="SHOP_DECORATION_STEPS"
          :value="constDetail.steps"
        />
        <c-list-item dict-type-code="SHOP_DECORATION_STATE" type="text" label="装修状态" :value="constDetail.state" />
        <c-list-item dict-type-code="DECORATION_RANGE" type="text" label="装修范围" :value="constDetail.decorationRange" />
        <c-list-item type="text" label="工程监理" :value="constDetail.proSupervisorName" />
        <c-list-item suffix="㎡" type="text" label="报图面积" :value="constDetail.shopTotalArea" />
        <c-list-item type="text" label="门店建设项目号" :value="constDetail.constCode" />
        <c-list-item type="text" label="门店建设状态" dict-type-code="CONST_STATE" :value="constDetail.constState" />
        <!-- <c-list-item type="text" label="应整改完成时间" :value="constDetail.planCompletionDate" /> -->

      </c-list>
    </div>
  </div>
</template>
<script>
import { getShopByCode, getDecorationByCode } from '@/api/marketService/decorateInspection'

export default {
  name: 'DecorateInspectionBase',
  components: { },
  props: {
    shopCode: {
      type: String,
      default: ''
    },
    decorateTaskNo: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      loading: false,
      showPicDetail: false,
      shopDetail: {
        shopName: '',
        shopCode: '',
        shopAddress: '',
        officeCode: '',
        officeName: '',
        customerCode: '',
        customerName: '' }, // 门店信息
      constDetail: {
        decorationTaskCode: '',
        state: '',
        decorationRange: '',
        proSupervisorName: '',
        area: '',
        constCode: '',
        planCompletionDate: '',
        constState: ''
      }, // 装修任务信息
      shop: [],
      constArr: [],
      dialogConfigShop: {
        title: '门店',
        filtersRaw: [{ 'id': 'status', 'property': 'status', 'value': '1', 'operator': '=' }],
        pageFlag: false,
        interfacePath: `/select-service/api/v1/shop/page`,
        setting: [{ prop: 'code', title: '编码' }, { prop: 'name', title: '名称' }]
      },
      dialogConfigConst: {
        title: '装修任务号',
        filtersRaw: [],
        pageFlag: false,
        interfacePath: `/slm-admin/api/v1/fitPatrol/getDecorationByShopCode/{shopCode}`,
        setting: [{ prop: 'constCode', title: '门店建设项目号' }, { prop: 'decorationTaskCode', title: '装修任务号' }]
      }
    }
  },
  watch: {
    shopCode: {
      handler(v) {
        if (!v) return
        this.handelQueryShopData(v)
      }
    },
    decorateTaskNo: {
      handler(v) {
        if (!v) return
        this.handelQueryConstData(v)
      }
    }
  },
  created() {

  },
  methods: {
    handleSave() {
      return { shopCode: this.shopDetail.shopCode, decorateTaskNo: this.constDetail.decorationTaskCode }
    },
    handleBack() {
      this.clearForm()
      this.$store.dispatch('views/goBack')
    },
    handleChangeShop(data) {
      if (data.length !== 0) {
        this.handelQueryShopData(data[0].code)
      } else {
        this.shopDetail = {}
      }
    },
    handleChangeConst(data) {
      if (data.length !== 0) {
        this.handelQueryConstData(data[0].decorationTaskCode)
      } else {
        this.constDetail = {}
      }
    },
    handelQueryConstData(decorationTaskCode) {
      getDecorationByCode(decorationTaskCode).then(res => {
        if (res.success) {
          const { decorationTaskCode, state, steps, shopTotalArea, decorationRange, proSupervisorName, area, planCompletionDate, constCode, constState } = res.data
          this.constDetail = { decorationTaskCode, state, steps, shopTotalArea, decorationRange, proSupervisorName, area, planCompletionDate, constCode, constState }
          this.constArr = [{ label: decorationTaskCode, value: decorationTaskCode }]
        }
      })
    },
    handelQueryShopData(shopCode) {
      this.loading = true
      getShopByCode(shopCode).then(res => {
        if (res.success) {
          const { shopName, shopCode, shopAddress, officeCode, officeName, customerCode, customerName } = res.data
          this.shopDetail = { shopName, shopCode, shopAddress, officeCode, officeName, customerCode, customerName }
          this.shop = [{ label: shopCode, value: shopCode }]
        }
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    clearForm(done) {
      this.shopDetail = {}
      this.constDetail = {}
      this.$refs.rulesForm && this.$refs.rulesForm.clearValidate()
      done && done()
    }
  }
}
</script>
<style lang="scss" scoped>
.but20{ margin-bottom: 20px;}
.el-breadcrumb__inner .btn-green{
    color: #3DC094;
}
/deep/.el-breadcrumb__inner{
  color: $qup-color-primary;
}
</style>
